<template>
  <view class="order-detail-page">
    <view v-if="mode === 'order'" class="status-box">
      <view class="left">{{statusStr}}</view>
      <view class="right">上门时间：{{info.date}}</view>
    </view>
    <view v-else class="block"></view>
    <view class="group">
      <view class="title">客户信息</view>
      <view class="cell">
        <view class="label">订单来源</view>
        <view class="value">{{info.source}}</view>
      </view>
      <view class="cell">
        <view class="label">客户名称</view>
        <view class="value">{{info.user_name}}</view>
      </view>
      <view class="cell">
        <view class="label">电话</view>
        <view class="value">{{info.user_phone}}</view>
      </view>
      <view class="cell">
        <view class="label">地址</view>
        <view class="value">{{info.user_address}}</view>
      </view>
    </view>
    <view class="group">
      <view class="title">服务信息</view>
      <view class="cell">
        <view class="label">服务项目</view>
        <view class="value">{{info.skill_name}}</view>
      </view>
      <view class="cell">
        <view class="label">服务价格</view>
        <view class="value money">￥<text class="price">{{info.serve_price || '0.00'}}</text></view>
      </view>
      <view class="cell">
        <view class="label">订单备注</view>
        <view class="value">{{info.remark || '-'}}</view>
      </view>
      <template v-if="['5','6'].includes(info.status)">
        <view class="cell">
          <view class="label">附加费</view>
          <view class="value">￥{{info.additional_price || '0.00'}}</view>
        </view>
        <view class="cell">
          <view class="label">完工照片</view>
          <view class="value">
            <view class="img-box">
              <image v-for="(item, index) in info.images" :key="index" class="img" :src="item" @click="preview(index)" mode="aspectFill"></image>
            </view>
          </view>
        </view>
      </template>
    </view>
    
    <template v-if="mode === 'order'">
      <button-fixed v-if="info.status == '2'" @submit="accept">确认接单</button-fixed>
      <button-fixed v-else-if="info.status == '4'" @submit="skipConfirm">确认完成</button-fixed>
    </template>
    <button-fixed v-if="mode === 'task'" @submit="grab">
      我要抢单
      <template v-if="userInfo.type == '1'" slot="btn">
       <view class="dispatch-btn" @click="dispatch">派单</view>
      </template>
    </button-fixed>
  </view>
</template>

<script>
  import { order_status } from '@/utils/dict/'
  import { TaskDetailApi, ConfirmOrdersApi, GrabOrdersApi } from '@/api/'
  const app = getApp()
  
  export default {
    data() {
      return {
        userInfo: {},
        info: {
          order_id: undefined,
        },
        mode: 'order'
      };
    },
    computed: {
      statusStr() {
        const target = order_status.find(v => v.value == this.info.status)
        return target?.label || this.info.status
      }
    },
    methods: {
      preview(current) {
        uni.previewImage({
          current,
          urls: this.info.images,
        })
      },
      loadRes() {
        TaskDetailApi(this.info).then((res) => {
          this.info = { ...this.info, ...res.data }
          this.info.date += ' ' + (this.info?.reservation_time || '')
        })
      },
      // 确认完成
      skipConfirm() {
        uni.navigateTo({
          url: `/subpages/confirm/confirm?id=${this.info.order_id}`
        })
      },
      // 接单
      accept() {
        uni.showModal({
          content: '是否确认接单？',
          success: (res) => {
            if (res.confirm) {
              ConfirmOrdersApi({ order_id: this.info.order_id }).then(() => {
                uni.showToast({
                  icon: 'success',
                  title: '接单成功',
                  success: () => {
                    setTimeout(() => {
                      this.loadRes()
                    }, 1200)
                  }
                })
              }).catch(() => {})
            }
          }
        })
      },
      // 抢单
      grab() {
        uni.showModal({
          content: '是否确认抢单？',
          success: (res) => {
            if (res.confirm) {
              GrabOrdersApi({ order_id: this.info.order_id }).then(() => {
                uni.showToast({
                  icon: 'success',
                  title: '抢单成功',
                  success: () => {
                    setTimeout(() => {
                      this.loadRes()
                    }, 1200)
                  }
                })
              }).catch(() => {})
            }
          }
        })
      },
      // 派单
      dispatch() {
        uni.navigateTo({
          url: `/subpages/dispatch/dispatch?id=${this.info.order_id}`
        })
      },
    },
    onLoad(options) {
      this.userInfo = uni.getStorageSync('userInfo')
      this.info.order_id = options?.id || ''
      this.mode = options?.mode || 'order'
      this.loadRes()
    }
  }
</script>

<style lang="scss" scoped>
.order-detail-page {
  overflow: hidden;
  background: linear-gradient(to bottom, #236597 0rpx, #236597 158rpx, #F6F6F6 159rpx, #F6F6F6 100%);
  .dispatch-btn {
    width: 336rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    box-sizing: border-box;
    @include flex;
    color: $uni-color-primary;
    border: 1px solid $uni-color-primary;
    margin-right: 20rpx;
  }
  .status-box {
    box-sizing: border-box;
    padding: 24rpx 30rpx 4rpx;
    @include flex;
    .left {
      flex: 1;
      font-size: 30rpx;
      color: #FFFFFF;
    }
    .right {
      font-size: 26rpx;
      color: #FFFFFF;
    }
  }
  .block {
    width: 100%;
    height: 10rpx;
  }
  .group {
    background-color: #fff;
    width: 690rpx;
    margin: 20rpx auto;
    border-radius: 10rpx;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 30rpx;
    .title {
      color: #333333;
      font-size: 30rpx;
      font-weight: bold;
      margin-top: 26rpx;
    }
    .cell {
      @include flex(row,flex-start,space-between);
      margin: 30rpx 0;
      overflow: hidden;
      .label {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #999999;
      }
      .value {
        max-width: 470rpx;
        line-height: 40rpx;
        overflow: hidden;
        font-size: 28rpx;
        color: #333333;
        word-break: break-all;
        text-align: right;
        &.money {
          color: #DA0205;
          .price {
            font-size: 34rpx;
            font-weight: bold;
          }
        }
        .img-box {
          width: 470rpx;
          @include flex(row,flex-start,flex-end,wrap);
          .img {
            width: 110rpx;
            height: 110rpx;
            overflow: hidden;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
            &:nth-child(4n) {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
